<template>
    <div class="table-form-page">
        <div class="form-page-header">
            <div>
                <el-page-header @back="closeWindow" content="设备维护" />
            </div>
            <div>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </div>
        </div>
        <div class="form-content">
            <table class="table-class">
                <col class="label-col" />
                <col class="content-col" />
                <col class="label-col" />
                <col class="content-col" />
                <tr class="tr-class">
                    <td class="tab-class" colspan="4">设备信息</td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">设备编码</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.code" class="form-input-class" placeholder="请输入设备编码" />
                    </td>
                    <td class="td-class label-class">设备名称</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.name" class="form-input-class" placeholder="请输入设备名称" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">设备型号</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.model" class="form-input-class" placeholder="请输入设备型号" />
                    </td>
                    <td class="td-class label-class">设备规格</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.specs" class="form-input-class" placeholder="请输入设备规格" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">设备精度</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.prec" class="form-input-class" placeholder="请输入设备精度" />
                    </td>
                    <td class="td-class label-class"></td>
                    <td class="td-class content-class"></td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">出厂序列号</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.serialNo" class="form-input-class" placeholder="请输入设备出厂序列号" />
                    </td>
                    <td class="td-class label-class">生产厂商</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.makerCode" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in markerOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">购置日期</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.purchaseDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                    <td class="td-class label-class">单价（元）</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.unitPrice" class="form-input-class" placeholder="请输入设备单价" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">检定/校准周期</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.calCycle"
                            class="form-input-class"
                            placeholder="请输入设备检定/校准周期"
                        />
                    </td>
                    <td class="td-class label-class">检定/校准日期</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.calDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">计划送检单位</td>
                    <td class="td-class content-class" colspan="3">
                        <el-input
                            v-model="form.inspectCompany"
                            class="form-input-class"
                            placeholder="请输入计划送检单位"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">保管人</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.employeeName" class="form-input-class" placeholder="请输入设备保管人" />
                    </td>
                    <td class="td-class label-class">所属部门</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.departmentName"
                            class="form-input-class"
                            placeholder="请输入设备名"
                            readonly
                            @click="chooseDepartment"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">所属项目</td>
                    <td class="td-class content-class" colspan="3">
                        <el-input
                            v-model="form.projectName"
                            class="form-input-class"
                            placeholder="请输入设备名"
                            readonly
                            @click="chooseProject"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">其他说明</td>
                    <td class="td-class content-class" colspan="3">
                        <el-input
                            v-model="form.remark"
                            type="textarea"
                            :rows="5"
                            class="form-input-class"
                            placeholder="其他说明"
                        />
                    </td>
                </tr>
            </table>
        </div>

        <el-dialog
            width="400px"
            top="20vh"
            title="部门"
            v-model="showDepartment"
            :lock-scroll="true"
            :close-on-click-modal="false"
        >
            <div class="tree-dialog-content">
                <department-tree @select="departmentSelected"></department-tree>
            </div>
        </el-dialog>
        <el-dialog
            width="800px"
            top="10vh"
            title="项目"
            v-model="showProjectGridCpt"
            :lock-scroll="true"
            :close-on-click-modal="false"
        >
            <div class="dialog-content">
                <ProjectGridCpt @select="projectSelected"></ProjectGridCpt>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import optionUtil from '@/utils/option.js'
import DepartmentTree from '@/components/bas/DepartmentTree.vue'
import ProjectGridCpt from '@/components/pub/ProjectGridCpt.vue'

const props = defineProps({
    id: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['close'])

const form = reactive({
    id: '',
    code: '',
    serialNo: '',
    name: '',
    model: '',
    specs: '',
    prec: '',
    makerCode: '',
    makerName: '',
    purchaseDate: '',
    unitPrice: '',
    calCycle: '',
    calDate: '',
    inspectCompany: '',
    departmentId: '',
    departmentCode: '',
    departmentName: '',
    projectId: '',
    projectCode: '',
    projectName: '',
    employeeNo: '',
    employeeName: ''
})

const markerOption = ref([])

const showDepartment = ref(false)

const showProjectGridCpt = ref(false)

const loadOptions = () => {
    http.fetchForm({
        url: '/sys/dictionary/queryByGroups',
        method: 'get',
        data: {
            groupCodes: 'P-003-001'
        }
    }).then((res) => {
        markerOption = res.data['P-003-001']
    })
}

const closeWindow = () => {
    emit('close')
}

const loadDeviceDetail = () => {
    http.fetchForm({
        url: '/yunying/device/findById',
        method: 'get',
        data: {
            id: props.id
        }
    }).then((res) => {
        let data = res.data
        data['unitPrice'] = data.unitPrice / 100
        Object.assign(form, data)
    })
}

const onSubmit = () => {
    let params = form
    params['makerName'] = optionUtil.findLabelByValue(markerOption, params.makerCode)
    params['unitPrice'] = params.unitPrice * 100
    http.fetchJson({
        url: '/yunying/device/save',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '保存成功',
            type: 'success'
        })
        closeWindow()
    })
}

const chooseDepartment = () => {
    showDepartment = true
}

const departmentSelected = (res) => {
    form.departmentId = res.id
    form.departmentCode = res.code
    form.departmentName = res.label
    showDepartment = false
}

const chooseProject = () => {
    showProjectGridCpt.value = true
}

const projectSelected = (res) => {
    console.log(res)
    let info = res[0]
    form.projectId = info.id
    form.projectCode = info.code
    form.projectName = info.name
    showProjectGridCpt.value = false
}

onMounted(() => {
    loadOptions()
    if (props.id != '') {
        loadDeviceDetail()
    } else {
        showSaveBtn.value = true
    }
})
</script>
<style scoped>
@import '@/assets/css/table-form.css';
</style>
